<template>
  <el-form label-width="80px">
    <el-form-item label="SPU名称">
      <el-input v-model="spuInfo.spuName"></el-input>
    </el-form-item>
    <el-form-item label="品牌">
      <el-select  placeholder="请选择活动区域" v-model="spuInfo.tmId">
        <el-option :label="tradmark.tmName" :value="tradmark.id" :key="tradmark.id"
                   v-for="tradmark in tradmarks"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="SPU描述">
      <el-input type="textarea" v-model="spuInfo.description"
                :rows="4" placeholder="请输入内容"></el-input>
    </el-form-item>
    <el-form-item label="SPU图片">
      <!--
        action: 上传图片的接口
        list-type: 多张图片该如何展示
        on-preview: 点击图片的钩子
        on-remove: 点击删除按钮的钩子
        file-list : 上传的文件列表
      -->
      <el-upload
        :action="`${$BASE_API}/admin/product/fileUpload`"
        list-type="picture-card"
        :file-list="spuInfo.spuImageList"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </el-form-item>
    <el-form-item label="销售属性">
      <el-select v-model="attr_id_name"  :placeholder="unUsedplaceholder">
        <el-option :label="unUsedSaleAttr.name" :value="`${unUsedSaleAttr.id}-${unUsedSaleAttr.name}`" :key="unUsedSaleAttr.id"
                   v-for="unUsedSaleAttr in unUsedSaleAttrList"></el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addAttr">添加销售属性</el-button>
      <el-table style="margin: 20px 0" border :data="spuInfo.spuSaleAttrList">
        <el-table-column align="center" label="序号" type="index" width="80"></el-table-column>
        <el-table-column align="center" label="属性名" prop="saleAttrName" ></el-table-column>
        <el-table-column align="center" label="属性值列表">
         <template slot-scope="{row,$index}"> <!--row:销售属性-->
           <el-tag :key="spuSaleAttrValue.id" v-for="(spuSaleAttrValue,index) in row.spuSaleAttrValueList"
                   closable :disable-transitions="false" @close="row.spuSaleAttrValueList.splice(index,1)" style="margin-right: 5px">
             {{spuSaleAttrValue.saleAttrValueName}}
           </el-tag>
           <el-input class="input-new-tag" v-if="row.inputVisible" v-model="row.inputValue"
                     size="small" :ref="`saveTagInput${$index}`"
                     @keyup.enter.native="handleInputConfirm(row)" @blur="handleInputConfirm(row)">
           </el-input>
           <el-button v-else class="button-new-tag" size="small" @click="showInput(row,$index)">+ New Tag</el-button>
         </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="{row,$index}">
            <HintButton title="删除SPU" type="danger"  @click="spuInfo.spuSaleAttrList.splice($index,1)"
                        icon="el-icon-delete" size="mini" ></HintButton>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="save" :loading="loading">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
    export default {
      name: "spuForm",
      data() {
        return {
          tradmarks:[],//品牌下拉列表对应的数据
          BaseSaleAttrList:[],//销售属性下拉列表对应的数据
          spuInfo:{
            spuName: "", //spu名称
            description: "",//spu描述
            category3Id: "",//spu对应的三级分类id 在当前界面是没有对应的数据的
            tmId: "", //品牌id
            //和编辑模式 显示模式切换相关的数据 都应该定在spuSaleAttrList的每一项中(每一项才是代表的一个属性)
            //spuSaleAttrList:[{spuSaleAttrValueList:[]},{}]
            spuSaleAttrList:[],//spu 对应的销售属性列表
            spuImageList: [] //spu 对应的图片列表
          },
          spuid:"",//spu的id

          //上传图片组件有关
          dialogImageUrl: '',
          dialogVisible: false,

          //销售属性的id&名字
          attr_id_name:"",

          //按钮的加载效果
          loading:false
        };
      },
      computed:{
        //没有使用过的销售属性列表
        unUsedSaleAttrList(){


          //BaseSaleAttrList : 完整的销售属性列表
          //spuSaleAttrList  : 当前SPU已经使用过的销售属性列表
          let {BaseSaleAttrList,spuInfo:{spuSaleAttrList}} = this;

          console.log(BaseSaleAttrList,spuSaleAttrList)

          return BaseSaleAttrList.filter((BaseSaleAttr)=>{
             // 过滤在spuSaleAttrList中出现过的销售属性

            //spuSaleAttrList: 使用过的整个销售属性列表
            //spuSaleAttr : 一个个使用过的销售属性
             return  !spuSaleAttrList.some( spuSaleAttr => spuSaleAttr.baseSaleAttrId === BaseSaleAttr.id)
          })
        },
        unUsedplaceholder(){
          return this.unUsedSaleAttrList.length===0?"没有啦":`还剩${this.unUsedSaleAttrList.length}个未选择`;
        }
      },
      methods: {

        //重置所有数据
        reset(){
          this.tradmarks=[],//品牌下拉列表对应的数据
          this.BaseSaleAttrList=[],//销售属性下拉列表对应的数据
          this.spuInfo={
            spuName: "", //spu名称
              description: "",//spu描述
              category3Id: "",//spu对应的三级分类id
              tmId: "", //品牌id
              //和编辑模式 显示模式切换相关的数据 都应该定在spuSaleAttrList的每一项中(每一项才是代表的一个属性)
              //spuSaleAttrList:[{spuSaleAttrValueList:[]},{}]
              spuSaleAttrList:[],//spu 对应的销售属性列表
              spuImageList: [] //spu 对应的图片列表
          },
          this.spuid="",//spu的id
          this.dialogImageUrl= '',
          this.dialogVisible= false,
          this.attr_id_name="",
          this.loading=false
        },

        //发送新增 & 修改的请求
        async save(){
          //拿到imglist处理成矿业发送请求的格式
          // 取出数据
          const {spuInfo} = this
          spuInfo.spuImageList = spuInfo.spuImageList.map(item => ({
            imgName: item.name,
            imgUrl: item.response ? item.response.data : item.url
          }))

          console.log(spuInfo);
          try {
            //发送请求
            this.loading = true;
            await this.$API.spu.addAndUpdate(this.spuInfo)
            //请求成功
            //提示消息
            this.$message.success('保存SPU成功')
            //关闭页面
            this.$parent.$parent.showListFn()
            //通知spu重新刷新一把页面
            this.$emit("success")

          }catch (e) {

          }finally {
            this.loading = false;
          }

        },



        //请求品牌相关数据去填充品牌对应的下拉列表
        //请求销售属性相关数据去填充销售属性对应的下拉列表
        async initUpdateData(spuid){
          this.spuid = spuid;
          //发送请求获取对应的tradmarks
          let {data:trademark} = await this.$API.trademark.getAllTrademark()
          let {data:BaseSaleAttrList} = await this.$API.spu.getBaseSaleAttrList()
          let {data:spuInfo} = await this.$API.spu.getSpuInfoById(this.spuid)
          let {data:spuImageList} = await this.$API.spu.getSpuImageList(this.spuid)
          this.tradmarks = trademark;
          this.BaseSaleAttrList = BaseSaleAttrList;
          this.spuInfo = spuInfo;


          //当前的spuImageList的数据结构和element ui的组件没有对应上
          //map方法返回一个新的数组 数组中每一项都是map回调返回的数据
          spuImageList = spuImageList.map(spuImage=>({
            id:spuImage.id,
            name:spuImage.imgName,
            url:spuImage.imgUrl,
            spuId:spuImage.spuId,
            status:spuImage.status,
            uid:spuImage.uid
            // id:9098
            // imgName:"dcbc31f086bd0f3b88e5f8e3c57c0406.jpg"
            // imgUrl:"http://182.92.128.115:8080/group1/M00/00/79/rBFUDF-PidSAVYS_AAC6V7tSbZs550.jpg"
            // spuId:1818
            // status:"success"
            // uid:1603524339555
          }))
          this.spuInfo.spuImageList = spuImageList;
        },
        async initAddData(category3Id){
          //新增时是没有category3Id的
          this.spuInfo.category3Id = category3Id;
          let {data:trademark} = await this.$API.trademark.getAllTrademark()
          let {data:BaseSaleAttrList} = await this.$API.spu.getBaseSaleAttrList()
          this.tradmarks = trademark;
          this.BaseSaleAttrList = BaseSaleAttrList;
        },

        //在界面上添加一个销售属性
        addAttr(){
          //构建一个属性对象
          /*
          {
            "baseSaleAttrId": "1",
            "saleAttrName": "选择套装",
            "spuSaleAttrValueList": []
          }*/
          let attr_id_name = this.attr_id_name; //1-选择颜色
          let [baseSaleAttrId,saleAttrName] = attr_id_name.split("-")
          let attr= {
            //对应的计算属性在执行时 逻辑会不起作用
            baseSaleAttrId:+baseSaleAttrId,
            saleAttrName,
            spuSaleAttrValueList:[]
          }
          //将构建的属性对象塞到spuInfo.spuSaleAttrList中
          this.spuInfo.spuSaleAttrList.push(attr)
          //清除销售属性对应的下拉列表
          this.attr_id_name = ""
        },


        //取消按钮的逻辑
        cancel(){
          //修改父组件中的showList数据
          this.$parent.$parent.showListFn()
        },


        //上传图片组件有关
        //点击删除按钮的钩子
        handleRemove(file, fileList) {
          this.spuInfo.spuImageList = fileList;
        },
        //上传头像成功之后调用的回调
        handleAvatarSuccess(res, file,fileList) {
          // res: 图片上传成功之后返回的信息(上传接口返回的)
          // file : 你上传成功的那张图片的信息
          // fileList : 当前完成操作后 界面上剩下的图片信息数组
          this.spuInfo.spuImageList = fileList;
        },
        //上传头像之前的钩子 如果返回true则允许调用action指定的接口进行上传操作
        beforeAvatarUpload(file) {
          console.log(file);
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024  < 50;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 50kb!');
          }

          //最终能放行 图片类型必须是jpg 大小必须小于50kb
          return isJPG && isLt2M;
        },
        //on-preview: 点击图片的钩子
        handlePictureCardPreview(file) {
          //file :点击的那张图的信息
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },

        //和编辑模式 显示模式切换相关的方法

        //实现el-input 和 el-button直接的切换
        //显示模式 --> 编辑模式
        showInput(row,index) {
          if(row.hasOwnProperty("inputVisible")){
            row.inputVisible = true;
          }else{
            this.$set(row,"inputVisible",true)
          }

          this.$nextTick(_ => {
            this.$refs[`saveTagInput${index}`].focus();
          });
        },
        handleInputConfirm(row){
          //准备一个属性值
          /*
          {
            "saleAttrValueName": "白色",
            "baseSaleAttrId": "1"
          }
          */
          var attrVal = {
            baseSaleAttrId:row.baseSaleAttrId,
            saleAttrValueName:row.inputValue
          }

          //手动对输入的数据做校验

          //将输入框中的数据拿到 塞到spuSaleAttrValueList
          row.spuSaleAttrValueList.push(attrVal)

          //清除输入框的数据
          row.inputValue = ""
          //切到显示模式
          row.inputVisible = false
        }
      }
    }
</script>

<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
